<template>
  <component :is="getchild" :title="store.childTitle" :remarks="store.childRemarks" />
</template>

<script lang="ts">
export default defineComponent({
  name: 'styleComponent',
});
</script>

<script setup lang="ts">
import { computed, defineComponent, ref, watch } from 'vue';
import styleOne from './styleOne.vue';
import styleTwo from './styleTwo.vue';
import styleThree from './styleThree.vue';
import style4 from './styleFour.vue';
import style5 from './styleFive.vue';
import style6 from './styleSix.vue';
import style7 from './style7.vue';
import style8 from './style8.vue';
import style9 from './style9.vue';
import style10 from './style10.vue';
import style11 from './style11.vue';
import style12 from './style12.vue';
import style13 from './style13.vue';
import style14 from './style14.vue';
import style15 from './style15.vue';
import style16 from './style16.vue';
import style17 from './style17.vue';
import { commonDataStore, useProjectStore } from '@/store';

const store = useProjectStore();
const commonStore = commonDataStore();

const getchild = computed(() => {
  switch (commonStore.templateId) {
    case 546821049266245:
      return styleOne;
      break;
    case 568727972499525:
      return styleTwo;
      break;
    case 581876609753157:
      return styleThree;
      break;
    case 584041224159301:
      return style4;
      break;
    case 594187892883525:
      return style5;
      break;
    case 598779929522245:
      return style6;
      break;
    case 607270742659141:
      return style7;
      break;
    case 609108365123653:
      return style8;
      break;
    case 618322755817541:
      return style9;
      break;
    case 621494527193157:
      return style10;
      break;
    case 621784378253381:
      return style11;
      break;
    case 628149200830533:
      return style12;
      break;
    case 643443922464837:
      return style13;
      break;
    case 645568970317893:
      return style14;
      break;
    case 651173498134597:
      return style15;
      break;
    case 661088851107909:
      return style16;
      break;
    case 688032033431621:
      return style17;
      break;
    default:
      return styleOne;
      break;
  }
  // if (props.info.children.length == 0) {
  //   return Subunit1Child7;
  // }
  //   switch (props.ModuleId) {
  //     case 10:
  //       return child1;
  //       break;
  //     case 11:
  //       return child2;
  //       break;
  //     case 12:
  //       return child3;
  //       break;
  //     case 13:
  //       return child4;
  //       break;
  //     case 14:
  //       return child5;
  //       break;
  //   }
});
</script>

<style lang="less" scoped></style>
